<template>
  <fieldset>
    <legend>添加学生</legend>
    <el-form
      ref="stuFormRef"
      :model="stuForm"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="姓名:" prop="name" >
        <el-input placeholder="请输入姓名" v-model.number="stuForm.name" clearable autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别:" prop="sex">
        <el-radio-group v-model="stuForm.sex">
          <el-radio label="男" />
          <el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机号:" prop="phone" >
        <el-input placeholder="请输入手机号" v-model.number="stuForm.phone" clearable autocomplete="off" />
      </el-form-item>
      <el-form-item label="选择班级:" prop="classId">
        <el-select v-model="stuForm.classId" placeholder="请选择班级">
          <el-option v-for="cal in classAll" :key="cal" :label="cal.name" :value="cal.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择班导:" prop="classGId">
        <el-select v-model="stuForm.classGId" placeholder="请选择班导">
          <el-option v-for="calg in classGAll" :key="calg" :label="calg.name" :value="calg.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注信息:" prop="remark">
        <el-input v-model="stuForm.remark" maxlength="50" resize="none" :rows="3" show-word-limit placeholder="请输入备注信息" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button-group>
          <el-button type="success" @click="submitForm(stuFormRef)">确认</el-button>
          <el-button type="info" @click="resetForm">重置</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </fieldset>
</template>

<script>

import { reactive, ref, unref } from 'vue'

export default {
  name: "StuAdd",

  setup() {

    let stuFormRef = ref()
    let stuForm = reactive({
      name:'',
      sex: '',
      phone: '',
      classId: '',
      classGId: '',
      remark: ''
    })

    const classAll = ref([
      {
        id: 1,
        name: "1班"
      },
      {
        id: 2,
        name: "2班"
      },
      {
        id: 3,
        name: "3班"
      }
    ])
    const classGAll = ref([
      {
        id: 1,
        name: "小红"
      },
      {
        id: 2,
        name: "小明"
      },
      {
        id: 3,
        name: "小丽"
      }
    ])

    const rules = {
      name: [
        { required: true, trigger: 'blur', validator: checkName },
      ],
      sex: [
        { required: true, trigger: 'blur', validator: checkSax }
      ],
      phone: [
        { required: true, trigger: 'blur', validator: checkPhone }
      ],
      classId: [
        { required: true, trigger: 'blur', validator: checkClass }
      ],
      classGId: [
        { required: true, trigger: 'blur', validator: checkClassG }
      ]
    }

    function checkName (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入姓名'));
      }
    }

    function checkSax (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入性别'));
      }
    }

    function checkPhone (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入手机号'));
      }
      setTimeout(() => {
        let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
        if (!myreg.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          callback();
        }
      }, 1000);
    }

    function checkClass (rule, value, callback) {
      if (!value) {
        return callback(new Error('请选择班级'));
      }
    }

    function checkClassG (rule, value, callback) {
      if (!value) {
        return callback(new Error('请选择班导'));
      }
    }

    const submitForm = (formEl) => {
      if (!formEl) return
      formEl.validate((valid, fields) => {
        console.log('error submit!', fields)
      })
      console.log('submit!')
      unref(stuFormRef).resetFields()
    }

    function resetForm() {
      const form = unref(stuFormRef)
      form.resetFields();
    }


    return {
      stuFormRef,stuForm, rules, checkName, submitForm, resetForm,classAll,classGAll
    }
  }



}
</script>

<style scoped>
fieldset {
  min-width: 400px;
  min-height: 282px;
  border:2px solid #DCDFE6;
  text-align:left;
  border-radius: 8px;
  margin: 50px auto;
  width:50%;
  height: 50%;
}
.el-form {
  padding: 20px;
  width: 90%;
}
</style>